<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="app">
    {{a}}
    <p v-html='b'></p>
    <p v-text='b'></p>
    <button @click="fn1" v-bind:id="c+'bb'" :class="{a1:true,a2:true,a3:true}" :style=[dd,bb]>
      点一下
    </button>
    <button @click="fn1" class="a0" :class="['a3','a4',a5]" :style="{color:'red',display:'block'}">
      点一下
    </button>

    <kfc a1="'123456'" />

  </div>

</body>
<script>


  const vm = Vue.createApp({
    data() {
      return {
        a: 'hi',
        b: '<h1>hi man</h1>',
        c: 'abc',
        a5: 'c1',
        dd: {
          padding: "10px 20px"
        },
        bb: {
          fontSize: '20px'
        }
      }
    },
    methods: {
      fn1() {
        console.log("上一个没显示")
      }
    },
    created() {
      console.log('this app is created')

    }
  })

  // 组件

  vm.component('kfc', {
    template: `<h1>巴拉拉能量 {{a}}</h1>`,
    props: {
      a1: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        a: 'aaaa'
      }
    }
  })
  vm.mount('#app')
</script>

</html>